{% extends "base.html" %}

{% block title %}注册人脸 - AI视频分析系统{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1"><i class="bi bi-person-plus me-2"></i>注册人脸</h2>
            <p class="text-muted mb-0">添加新的人脸到系统</p>
        </div>
        <a href="/face" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> 返回列表
        </a>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <form action="/registerface" method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="user_id" class="form-label">用户标识 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="user_id" name="user_id" required>
                            <div class="invalid-feedback">请输入用户标识</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="user_name" class="form-label">姓名 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="user_name" name="user_name" required>
                            <div class="invalid-feedback">请输入姓名</div>
                        </div>

                        <!-- 新增出生年份字段 -->
                        <div class="mb-3">
                            <label for="birth_year" class="form-label">出生年份 <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="birth_year" name="birth_year" 
                                   min="1900" max="{{ current_year }}" required>
                            <div class="invalid-feedback">请输入有效的出生年份 (1900-{{ current_year }})</div>
                        </div>
                        
                        <!-- 新增性别字段 -->
                        <div class="mb-3">
                            <label class="form-label">性别 <span class="text-danger">*</span></label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="gender" id="gender_male" value="男" required>
                                <label class="form-check-label" for="gender_male">男</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="gender" id="gender_female" value="女" required>
                                <label class="form-check-label" for="gender_female">女</label>
                            </div>
                            <div class="invalid-feedback">请选择性别</div>
                        </div>
                        
                        <!-- 固定使用美佳人脸库 -->
                        <input type="hidden" name="library_id" value="美佳">
                    </div>
                    
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="image" class="form-label">上传人脸图片 <span class="text-danger">*</span></label>
                            <input class="form-control" type="file" id="image" name="image" accept="image/jpeg,image/png" required>
                            <div class="form-text">支持JPG/PNG格式（不超过5MB），建议正面清晰照片</div>
                            <div class="invalid-feedback">请上传有效的人脸图片</div>
                        </div>
                        
                        <div class="border rounded p-3 bg-light mt-4">
                            <h5 class="mb-3"><i class="bi bi-info-circle me-2"></i>上传说明</h5>
                            <ul class="mb-0">
                                <li>请确保人脸清晰可见，无遮挡</li>
                                <li>建议使用正面照片，光线均匀</li>
                                <li>图片大小不超过5MB</li>
                                <li>仅支持JPG、PNG格式</li>
                                <li>避免侧脸、低头或过度表情</li>
                                <li>所有人脸将自动注册到"美佳"人脸库</li>
                                <li>提交后将自动同步到所有设备</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="d-flex justify-content-end mt-4 gap-2">
                    <button type="reset" class="btn btn-outline-secondary">重置</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-circle me-1"></i> 提交注册
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 设置当前年份
    const currentYear = new Date().getFullYear();
    document.getElementById('birth_year').max = currentYear;
    
    // 图片类型和大小验证
    document.getElementById('image').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            // 检查文件类型
            const validTypes = ['image/jpeg', 'image/png'];
            if (!validTypes.includes(file.type)) {
                this.setCustomValidity('仅支持JPEG或PNG格式的图片');
                return;
            }
            
            // 检查文件大小 (5MB)
            if (file.size > 5 * 1024 * 1024) {
                this.setCustomValidity('图片大小不能超过5MB');
                return;
            }
            
            this.setCustomValidity('');
        }
    });
    
    // 表单验证
    (function () {
      'use strict'
      const forms = document.querySelectorAll('.needs-validation')
      Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false)
      })
    })()
</script>
{% endblock %}